<template>
    <el-card class="self" :body-style="{ 
        padding: '0px',
        height: '128px',
        width: '100%'
     }">
    <!-- <img :src="productInfo.imgSrc" class="image"> -->
    <div class="avatar">
        <img :src="info.imgSrc" alt="info.title">
    </div>
    <div class="info">
        <p class="info-title">{{ info.title }}</p>
        <p v-for="(details, key) in info.contactDetails" class="info-account" :key="key">
            {{ details.type }}: {{ details.account }}
        </p>
    </div>
    </el-card>
</template>

<script>
import shitImg from "@/assets/logo.png";

export default {
  props: {
    info: {
      type: Object,
      default() {
        return {
          imgSrc: shitImg,
          title: "联系人",
          contactDetails: [
            { type: "微信", account: "123456" },
            { type: "QQ", account: "1212123" },
            { type: "电话", account: "12121322123" }
          ]
        };
      }
    }
  }
};
</script>


<style scoped>
.self {
  margin: 0 16px;
  margin-bottom: 60px;
  width: 512px;
}
.avatar,
.info {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  height: 100%;
}

.info {
  padding-top: 8px;
}

.avatar {
  width: 128px;
  height: 128px;
  margin-right: 16px;
}
.avatar img {
  width: 100%;
  height: 100%;
}

.info-title {
  font-size: 20px;
  font-weight: bolder;
  color: #303133;
}
.info-account {
  font-size: 16px;
  display: inline-block;
  color: #606266;
  margin: 10px 16px 0 0;
}
</style>